<template>
  <div class="login">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-1 wd-75 center strong" style="color: white">登录</div>
      </template>
    </HeaderTop>
    <van-form @submit="onSubmit" class="mt-5" >
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          autocomplete="on"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="AuthNumber"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          center
        >
          <template #button>
            <van-image v-if="AuthPic" :src="AuthPic.code" height="30px"></van-image>
          </template>
          <template #extra>
            <span class="ml-2" @click="getAuthNumber" v-if="AuthPic">
              <div class="fs-7 text-3" style="line-height: 0.44rem">看不清</div>
              <div class="fs-7 main-color" style="line-height: 0.44rem">换一张</div>
            </span>
          </template>
        </van-field>
      </van-cell-group>
      <p class="fs-7 ml-7 my-2 warning">温馨提示：未注册过的账号，登录时将自动登录</p>
      <p class="fs-7 ml-7 my-1 warning">注册过的用户可以凭账号密码的登录</p>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getAuth, login } from "@/api";
import { Auth_format, User_format } from "@/type/index";
import { user } from "@/store/index";
import { storeToRefs } from "pinia";
import { Toast } from "vant";
const router = useRouter();
const store = user();
const { user_id, userinfo } = storeToRefs(store);
const username = ref("");
const password = ref("");
const AuthNumber = ref("");
const AuthPic = ref<Auth_format>();
//获取验证码图片
const getAuthNumber = async () => {
  const res = await getAuth<Auth_format>();
  AuthPic.value = res;
};
//登录
const onSubmit = async () => {
   Toast.loading({
    duration: 0,
    forbidClick: true,
    message: "正在登陆中",
  });
  const res = await login<User_format>(username.value, password.value, AuthNumber.value);
  Toast.clear();
  if (res.user_id) {
    user_id.value = res.user_id;
    userinfo.value = res;
    Toast.success("登录成功");
    router.back()
  } else {
    AuthNumber.value = ''
    Toast.fail("登录失败");
    getAuthNumber()
  }
  const timer = setTimeout(()=>{
    Toast.clear();
    clearTimeout(timer)
  },1000)
};
//初始化函数
const initData = () => {
  getAuthNumber();
}
//调用初始化函数
initData()

</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.login {
  position: absolute;
  @include wh(100%, auto);
  min-height: 100%;
  left: 0;
  top: 0;
  background-color: #f7f8fa;
}
</style>
